<template>
  <div class="container">
    <el-breadcrumb separator="">
      <el-breadcrumb-item><div class="div1">仓库管理</div></el-breadcrumb-item>
      <el-breadcrumb-item><div class="div2">仓库库存</div></el-breadcrumb-item>
    </el-breadcrumb>

    <div class="nav">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商品" name="0">
          <el-collapse-transition>
            <div class="query" v-show="isShowForm">
              <div class="header">
                <span>数据查询</span>
                <p
                  style="font-size: 14px; color: #409eff; cursor: pointer"
                  @click="isShowForm = false"
                >
                  收起
                </p>
              </div>
              <el-form
                label-width="70px"
                :inline="true"
                ref="form"
                :model="queryFormGoods"
                size="mini"
              >
                <el-form-item label="商品信息">
                  <el-input
                    placeholder="请输入商品编号/名称"
                    v-model="queryFormGoods.info"
                  ></el-input>
                </el-form-item>
                <el-form-item class="formItem" label="仓库名称">
                  <el-select
                    clearable
                    @change="warSelect"
                    v-model="queryFormGoods.wareName"
                    placeholder="请选择仓库名称"
                  >
                    <el-option
                      v-for="item in wareData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item class="formItem" label="破损仓库">
                  <el-select
                    clearable
                    v-model="queryFormGoods.damagedWarId"
                    placeholder="请选择破损仓库"
                    default-first-option
                  >
                    <el-option
                      v-for="item in wareData1"
                      :key="item.id"
                      :label="item.damagedName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="库位">
                  <el-select
                    clearable
                    v-if="queryFormGoods.wareName"
                    style="width: 100%"
                    v-model="queryFormGoods.kw"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    clearable
                    v-else
                    style="width: 100%"
                    v-model="queryFormGoods.kw"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="采购部门">
                  <div class="selectTree">
                    <treeselect
                      :options="optionsDept"
                      v-model="queryFormGoods.department"
                      search-nested
                      :normalizer="normalizer"
                      noResultsText="未找到"
                      placeholder="请选择"
                    >
                    </treeselect>
                  </div>
                </el-form-item>

                <el-form-item label="商品分类">
                  <el-cascader
                    v-model="queryFormGoods.clientType"
                    :options="options"
                    :props="{
                      checkStrictly: true,
                      label: 'name',
                      value: 'id',
                      children: 'children',
                    }"
                    filterable
                    clearable
                  ></el-cascader>
                </el-form-item>

                <el-form-item label="商品品牌">
                  <el-select
                    v-model="queryFormGoods.bandName"
                    filterable
                    placeholder="请选择商品品牌"
                    clearable
                  >
                    <el-option
                      v-for="items in brandselect"
                      :key="items.id"
                      :label="items.name"
                      :value="items.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="上架与否">
                  <el-select
                    v-model="queryFormGoods.status"
                    placeholder="已上架"
                    clearable
                  >
                    <el-option label="上架" value="0"></el-option>
                    <el-option label="下架" value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="searchEvent()"
                    v-on:keyup.enter="searchEvent"
                    >搜索</el-button
                  >
                  <el-button size="mini" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-transition>
        </el-tab-pane>
        <el-tab-pane label="赠品" name="1">
          <el-collapse-transition>
            <div class="query" v-show="isShowForm">
              <div class="header">
                <span>数据查询</span>
                <p
                  style="font-size: 14px; color: #409eff; cursor: pointer"
                  @click="isShowForm = false"
                >
                  收起
                </p>
              </div>
              <el-form
                label-width="70px"
                :inline="true"
                ref="form"
                :model="queryFormGift"
                size="mini"
              >
                <el-form-item label="赠品信息">
                  <el-input
                    placeholder="请输入赠品编号/名称"
                    v-model="queryFormGift.info"
                  ></el-input>
                </el-form-item>
                <el-form-item class="formItem" label="仓库名称">
                  <el-select
                    clearable
                    v-model="queryFormGift.wareName"
                    placeholder="请选择仓库名称"
                    default-first-option
                  >
                    <el-option
                      v-for="item in wareData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItem" label="破损仓库">
                  <el-select
                    clearable
                    v-model="queryFormGift.damagedWarId"
                    placeholder="请选择破损仓库"
                    default-first-option
                  >
                    <el-option
                      v-for="item in wareData"
                      :key="item.id"
                      :label="item.damagedName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="库位">
                  <el-select
                    clearable
                    v-if="queryFormGift.wareName"
                    style="width: 100%"
                    v-model="queryFormGift.kw"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    clearable
                    v-else
                    style="width: 100%"
                    v-model="queryFormGift.kw"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="采购部门">
                  <div class="selectTree">
                    <treeselect
                      :options="optionsDept"
                      v-model="queryFormGift.department"
                      search-nested
                      :normalizer="normalizer"
                      noResultsText="未找到"
                      placeholder="请选择"
                    >
                    </treeselect>
                  </div>
                </el-form-item>

                <el-form-item label="品牌分类">
                  <el-cascader
                    v-model="queryFormGift.clientType"
                    :options="options"
                    :props="{
                      checkStrictly: true,
                      label: 'name',
                      value: 'id',
                      children: 'children',
                    }"
                    filterable
                    clearable
                  ></el-cascader>
                </el-form-item>

                <el-form-item label="赠品品牌">
                  <el-select
                    v-model="queryFormGift.bandName"
                    filterable
                    placeholder="请选择赠品品牌"
                    clearable
                    default-first-option
                  >
                    <el-option
                      v-for="items in brandselect"
                      :key="items.id"
                      :label="items.name"
                      :value="items.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="上架与否">
                  <el-select
                    v-model="queryFormGoods.status"
                    placeholder="已上架"
                    clearable
                  >
                    <el-option label="上架" value="0"></el-option>
                    <el-option label="下架" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="searchEvent()"
                    v-on:keyup.enter="searchEvent"
                    >搜索</el-button
                  >
                  <el-button size="mini" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-transition>
        </el-tab-pane>
        <!-- <el-tab-pane label="物料" name="2"></el-tab-pane> -->
      </el-tabs>
    </div>
    <!-- v-if="isShowButton != '叶丽萍'" -->
    <div class="buttonCont">
      <el-button @click="dialogVisible = true" size="mini" type="primary"
        >已添加列表 ({{
          activeName == 0 ? cart.goodList.length : cart.giftList.length
        }})</el-button
      >

      <el-button @click="addCart" size="mini" type="primary"
        >批量添加</el-button
      >

      <el-button @click="goodsExport" size="mini" type="primary"
        >导出</el-button
      >
      <el-button
        type="primary"
        size="mini"
        @click="isShowForm = true"
        v-show="!isShowForm"
        style="position: absolute; right: 10px"
        >搜索展开</el-button
      >
      <!-- <el-button size="small" type="primary"
      >采购入库</el-button
    > -->
    </div>

    <div class="tableContext">
      <el-table
        :data="tableData.list"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column label="图片" width="80">
          <template slot-scope="props">
            <img
              v-if="props.row.image"
              style="width: 70px; height: 70px"
              :src="ImgHttps + props.row.image"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column label="上下架状态" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.status == 0 ? "上架" : "下架" }}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="编号" width="100"></el-table-column>
        <el-table-column
          prop="title"
          label="名称"
          min-width="200"
          show-overflow
        ></el-table-column>
        <el-table-column prop="brandName" label="品牌"></el-table-column>
        <el-table-column
          prop="typeName"
          label="分类"
          width="100"
        ></el-table-column>
        <el-table-column
          label="库位"
          prop="storageLocationNames"
        ></el-table-column>
        <el-table-column prop="sellPrice" label="单价"></el-table-column>
        <el-table-column prop="specificationName" label="规格">
        </el-table-column>
        <el-table-column prop="quantityStock" label="实际库存">
        </el-table-column>
        <el-table-column prop="availableStock" label="可用库存">
        </el-table-column>
        <el-table-column prop="damagedStock" label="破损库存">
        </el-table-column>
        <el-table-column prop="quantityStock" label="总库存"></el-table-column>
        <el-table-column prop="date" label="入库库存">
          <template slot-scope="props">
            <el-popover
              placement="right"
              width="50"
              trigger="hover"
              :open-delay="200"
            >
              <div v-for="item in props.row.warehouses" :key="item.warName">
                <p>{{ item.warName }} {{ item.number }}</p>
              </div>

              <div
                slot="reference"
                v-for="item in props.row.warehouses"
                :key="item.warName"
              >
                <p>{{ item.warName }}</p>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="props">
            <span
              class="operation"
              v-if="parArray.indexOf('aloneAddCart') != -1"
              @click="addCartSign(props.row)"
              >添加</span
            >
            <span
              class="operation"
              v-if="parArray.indexOf('aloneAddCart') != -1"
              @click="getPoWarList(props.row)"
              >库位</span
            >
            <span
              class="operation"
              v-if="parArray.indexOf('recordCode') != -1"
              @click="toGoodsRecord(props.row)"
              >记录</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-drawer
      @closed="value = ''"
      append-to-body
      :withHeader="false"
      :visible.sync="dialogVisible"
      size="60%"
      direction="rtl"
    >
      <div
        style="border-bottom: 1px solid #dfdfdf; padding: 10px 0px 10px 10px"
      >
        <i
          class="el-icon-close"
          style="color: #d6d6d6; cursor: pointer"
          @click="dialogVisible = false"
        ></i>
        <span style="padding-left: 10px"> 已添加列表 </span>
      </div>
      <div style="overflow: auto">
        <div class="tableContext1">
          <el-table
            ref="multipleTableCart"
            stripe
            :data="activeName == 0 ? cart.goodList : cart.giftList"
            @selection-change="handleSelectionChangeCart"
            @row-click="rowClick"
          >
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="80"
            ></el-table-column>
            <el-table-column label="商品信息" prop="title"></el-table-column>
            <el-table-column
              label="实际库存"
              prop="quantityStock"
            ></el-table-column>
            <el-table-column
              label="可用库存"
              prop="availableStock"
            ></el-table-column>
            <el-table-column
              label="总库存"
              prop="quantityStock"
            ></el-table-column>
            <el-table-column label="入库仓库">
              <template slot-scope="scope">
                <div v-for="item in scope.row.warehouses" :key="item.id">
                  {{ item.warName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span
                  style="color: #f78d90; cursor: pointer"
                  @click="deleteCart(scope.row.id)"
                  >删除</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="height: 50px"></div>
        <div class="action">
          <el-button size="small" type="danger" @click="moreDelect"
            >批量删除</el-button
          >
          <div
            style="
              position: absolute;
              right: 0;
              bottom: 10px;
              padding-right: 10px;
            "
          >
            <el-select size="mini" v-model="value" placeholder="请选择">
              <el-option
                v-for="item in formButton"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button
              @click="toFormButtonUrl"
              style="margin-left: 10px"
              size="mini"
              type="primary"
              >添加表单</el-button
            >
          </div>
        </div>
      </div>
    </el-drawer>

    <div style="height: 50px"></div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum > 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->

    <el-dialog
      title="库位修改"
      :visible.sync="showKw"
      append-to-body
      width="30%"
    >
      <div class="kwContext">
        <div>当前库位</div>
        <div
          style="
            border: 1px solid #d8dce5;
            padding: 8px 12px;
            border-radius: 5px;
            background: #eee;
          "
        >
          {{
            kwData.storageLocationNames
              ? kwData.storageLocationNames
              : "没有库位"
          }}
        </div>
        <div>修改库位</div>
        <el-select style="width: 100%" v-model="kwData.ids" multiple>
          <el-option
            v-for="item in options4"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showKw = false">取 消</el-button>
        <el-button type="primary" @click="updateKw">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  data () {
    return {
      kwData: {},
      showKw: false,
      options1: [],
      options2: [],
      options3: [],
      options4: [],
      loading: false,
      formButton: [
        {
          value: 0,
          label: "库存调整",
        },
        {
          value: 1,
          label: "库存调拨",
        },
        {
          value: 2,
          label: "库存盘点",
        },
      ],
      normalizer (node) {
        return {
          id: node.orgCode,
          label: node.orgName,
          children: node.children,
        };
      },
      value: "",
      dialogVisible: false,
      cart: localStorage.getItem("cart")
        ? JSON.parse(localStorage.getItem("cart"))
        : { goodList: [], giftList: [] },
      multipleSelectionCart: [], //购物车的列表
      isShowForm: true,
      activeName: "0",
      currentPage1: 1,
      pageSize: 10,
      // 赠品
      pageGift: 1,
      pageSizeGift: 10,

      queryFormGoods: {
        clientType: [],
        status: "",
        wareName: "",
        bandName: "",
        info: "",
        department: null,
        kw: "",
        damagedWarId: ""
      },
      queryFormGift: {
        clientType: [],
        wareName: "",
        bandName: "",
        info: "",
        department: null,
        kw: "",
        damagedWarId: ""
      },
      multipleSelection: [],
      wareData: [],
      wareData1: [],
      client: [],
      options: [],
      optionsDept: [],
      brandselect: [],
      tableData: [],
      limits: "",
      parArray: [],
    };
  },
  created () {
    this.department();
    this.getStorageLocationList();
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "wareUpdateCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断
    this.wareList(); //仓库列表
    this.brandSelect1(); //分类列表
    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
    this.goodsList();
    // this.giftList();
    this.remoteMethod();
  },
  activated () {
    this.remoteMethod();
    this.department();
    this.goodsList();
    this.giftList();
    this.getStorageLocationList();
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null;
    next();
  },
  activated () {
    this.cart = JSON.parse(localStorage.getItem("cart"))
      ? JSON.parse(localStorage.getItem("cart"))
      : { goodList: [], giftList: [] };
  },
  methods: {
    getPoWarList (e) {
      if (e.warehouses) {
        this.axios
          .post("order/storageLocation/list", {
            keyword: "",
            pageNo: 1,
            pageSize: 99e5,
            warIds: e.warehouses.map(res => res.warId),
          })
          .then((res) => {
            if (res.code == 0) {
              this.kwData = e;
              this.options4 = res.data.list;
              this.showKw = true;
            } else {
              this.$message.error(res.message);
            }
          });
      } else {
        this.$message.warning("没仓库不能调整库位");
      }

    },
    remoteMethod () {
      this.axios
        .post("order/storageLocation/list", {
          keyword: "",
          pageNo: 1,
          pageSize: 99e5,
          warId: "",
        })
        .then((res) => {
          this.options3 = res.data.list;
        });
    },
    warSelect () {
      this.axios
        .post("order/storageLocation/list", {
          keyword: "",
          pageNo: 1,
          pageSize: 99e5,
          warId:
            this.activeName == 0
              ? this.queryFormGoods.wareName
              : this.queryFormGift.wareName,
        },
          {
            headers: {
              isLoading: false
            }
          })
        .then((res) => {
          this.options1 = res.data.list;
          if (this.activeName == 0) {
            this.queryFormGoods.kw = ""
          } else if (this.activeName == 1) {
            this.queryFormGift.kw = ""
          }
        });
    },
    updateKw (e) {
      if (!this.kwData.ids || !this.kwData.ids.length) {
        this.$message.warning("请选择要修改的库位");
        return;
      }
      this.axios
        .post("order/storageLocation/updateStorageLocationByGoodsId", {
          goodsId: this.kwData.id,
          goodsType: Number(this.activeName) + 1,
          storageLocationIds: this.kwData.ids,
        })
        .then((res) => {
          if (res.code == 0) {
            if (this.activeName == 0) {
              this.goodsList();
            } else if (this.activeName == 1) {
              this.giftList();
            }
            this.$message.success("修改成功");
            this.kwData = {};
            this.showKw = false;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    getStorageLocationList () {
      this.axios
        .post("order/storageLocation/list", {
          keyword: "",
          pageNo: 1,
          pageSize: 99e5,
          warId: "",
        })
        .then((res) => {
          this.options2 = res.data.list;
        });
    },
    // 部门选择列表
    department () {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.optionsDept = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    rowClick (e) {
      this.$refs.multipleTableCart.toggleRowSelection(e);
    },
    addCartSign (e) {
      if (
        this.activeName == 0 &&
        !this.cart.goodList.find((res) => res.id == e.id)
      ) {
        this.cart.goodList.push(e);
        this.$message.success("已添加到购物车");
      } else if (
        this.activeName == 1 &&
        !this.cart.giftList.find((res) => res.id == e.id)
      ) {
        this.cart.giftList.push(e);
        this.$message.success("已添加到购物车");
      } else {
        this.$message.warning("已存在购物车");
      }

      localStorage.setItem(
        "cart",
        JSON.stringify({
          goodList: this.cart ? this.cart.goodList : [],
          giftList: this.cart ? this.cart.giftList : [],
        })
      );
    },
    // 递归
    getMenuBtnList (menuTreeList, menuList, code) {
      for (let item of menuTreeList) {
        if (item.orgCode == code) {
          menuList.push({
            lable: item.orgName,
            orgCode: item.orgCode,
            type: item.type,
          });
        } else if (item.children && item.children.length > 0) {
          this.getMenuBtnList(item.children, menuList, code);
        }
      }
    },
    // 批量删除
    moreDelect () {
      for (let i in this.multipleSelectionCart) {
        if (this.activeName == "0") {
          if (
            this.cart.goodList.find(
              (res) => res.id == this.multipleSelectionCart[i].id
            )
          ) {
            this.cart.goodList = this.cart.goodList.filter(
              (res) => res.id != this.multipleSelectionCart[i].id
            );
          }
        } else {
          this.cart.giftList = this.cart.giftList.filter(
            (res) => res.id != this.multipleSelectionCart[i].id
          );
        }
      }
      localStorage.setItem(
        "cart",
        JSON.stringify({
          goodList: this.cart ? this.cart.goodList : [],
          giftList: this.cart ? this.cart.giftList : [],
        })
      );
    },
    deleteCart (e) {
      if (this.cart.goodList.find((res) => res.id == e)) {
        this.cart.goodList = this.cart.goodList.filter((res) => res.id != e);
      } else if (this.cart.giftList.find((res) => res.id == e)) {
        this.cart.giftList = this.cart.giftList.filter((res) => res.id != e);
      }

      localStorage.setItem(
        "cart",
        JSON.stringify({
          goodList: this.cart ? this.cart.goodList : [],
          giftList: this.cart ? this.cart.giftList : [],
        })
      );
    },
    handleSelectionChangeCart (e) {
      this.multipleSelectionCart = e;
    },

    addCart () {
      let flag = false;
      if (this.multipleSelectionCart && this.multipleSelection.length != 0) {
        if (this.activeName == "0") {
          for (let item of this.multipleSelection) {
            if (!this.cart.goodList.find((res) => res.id == item.id)) {
              this.cart.goodList.push(item);
              flag = true;
            }
          }
        } else {
          for (let item of this.multipleSelection) {
            if (!this.cart.giftList.find((res) => res.id == item.id)) {
              this.cart.giftList.push(item);
              flag = true;
            }
          }
        }

        localStorage.setItem(
          "cart",
          JSON.stringify({
            goodList: this.cart ? this.cart.goodList : [],
            giftList: this.cart ? this.cart.giftList : [],
          })
        );
        this.$refs.multipleTable.clearSelection();
        if (!flag) {
          this.$message.warning("已存在购物车");
        } else {
          this.$message.success("添加成功");
        }
      } else {
        this.$message.warning("未选择需要添加的商品");
      }
    },
    toFormButtonUrl () {
      if (this.value === "") {
        this.$message.warning("请选择表单类型");
        return;
      }
      if (this.value == 0) {
        if (this.multipleSelectionCart && this.multipleSelectionCart.length) {
          this.dialogVisible = false;
          this.$router.push({
            name: "addAdjustment",
            query: {
              obj: JSON.stringify({
                gids: this.multipleSelectionCart.map((res) => Number(res.id)),
                gType: this.activeName == "0" ? 1 : 2,
                type: "TB",
              }),
            },
          });
          this.$refs.multipleTableCart.clearSelection();
        } else {
          this.$message.warning("还没勾选商品");
        }
      } else if (this.value == 1) {
        if (this.multipleSelectionCart && this.multipleSelectionCart.length) {
          this.dialogVisible = false;
          this.$router.push({
            name: "wareUpdate",
            query: {
              obj: JSON.stringify({
                gids: this.multipleSelectionCart.map((res) => Number(res.id)),
                gType: this.activeName == "0" ? 1 : 2,
                type: "TB",
              }),
            },
          });
          this.$refs.multipleTableCart.clearSelection();
        } else {
          this.$message.warning("还没勾选商品");
        }
      } else if (this.value == 2) {
        if (this.multipleSelectionCart && this.multipleSelectionCart.length) {
          this.dialogVisible = false;
          this.$router.push({
            name: "checkFillIn",
            query: {
              obj: JSON.stringify({
                gids: this.multipleSelectionCart.map((res) => Number(res.id)),
                gType: this.activeName == "0" ? 1 : 2,
                type: "PD",
                isHc: 1,
              }),
            },
          });
          this.$refs.multipleTableCart.clearSelection();
        } else {
          this.$message.warning("还没勾选商品");
        }
      }
    },
    // 记录
    toGoodsRecord (row) {
      let typeid = 1;
      if (this.activeName == "0") {
        typeid = 1;
      } else if (this.activeName == "1") {
        typeid = 2;
      }
      this.$router.push({
        name: "goodsRecord",
        query: { id: row.id, typeid: typeid },
      });
    },
    // 商品列表
    goodsList () {
      this.axios
        .post("/order/stockControl/goodsList", {
          keyword: this.queryFormGoods.info,
          brandId: this.queryFormGoods.bandName,
          status: this.queryFormGoods.status,
          cid: "",
          endTime: "",
          goodsClassify: this.queryFormGoods.clientType[
            this.queryFormGoods.clientType.length - 1
          ], //this.queryFormGoods.clientType,
          goodsName: "",
          orderType: "",
          pageNo: this.currentPage1,
          pageSize: this.pageSize,
          storageLocationName: this.queryFormGoods.kw,
          startTime: "",
          title: "",
          type: 0,
          vender: "",
          warId: this.queryFormGoods.wareName,
          damagedWarId: this.queryFormGoods.damagedWarId
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
            // this.$nextTick(() => {
            //   for (let item of this.tableData.list) {
            //     if (this.cart.goodList.find((r) => r.id == item.id)) {
            //       this.$refs.multipleTable.toggleRowSelection(item);
            //     }
            //   }
            // });
          }
        });
    },
    // 导出
    goodsExport () {
      let parma;
      if (this.activeName == '0') {
        parma = {
          keyword: this.queryFormGoods.info,
          brandId: this.queryFormGoods.bandName,
          status: this.queryFormGoods.status,
          cid: "",
          endTime: "",
          goodsClassify: this.queryFormGoods.clientType[
            this.queryFormGoods.clientType.length - 1
          ], //this.queryFormGoods.clientType,
          goodsName: "",
          orderType: "",
          pageNo: this.currentPage1,
          pageSize: this.pageSize,
          storageLocationName: this.queryFormGoods.kw,
          startTime: "",
          title: "",
          type: this.activeName == '0' ? 0 : 1,
          vender: "",
          warId: this.queryFormGoods.wareName,
          damagedWarId: this.queryFormGoods.damagedWarId
        }
      } else {
        parma = {
          keyword: this.queryFormGift.info,
          brandId: this.queryFormGift.bandName,
          status: this.queryFormGoods.status,
          cid: "",
          endTime: "",
          goodsClassify: this.queryFormGoods.clientType[
            this.queryFormGoods.clientType.length - 1
          ], //this.queryFormGift.clientType,
          goodsName: "",
          orderType: "",
          storageLocationName: this.queryFormGift.kw,
          pageNo: this.pageGift,
          pageSize: this.pageSizeGift,
          startTime: "",
          title: "",
          type: 1,
          vender: "",
          warId: this.queryFormGift.wareName,
          damagedWarId: this.queryFormGift.damagedWarId
        }
      }
      this.axios
        .post("/order/stockControl/exportGoodsList", parma)
        .then((res) => {
          if (res.code == 0) {
            this.downloadlink(res.data);
          } else {
            this.$message.error(res.message);
          }
        });
    },

    giftList () {
      this.axios
        .post("/order/stockControl/complimentaryList", {
          keyword: this.queryFormGift.info,
          brandId: this.queryFormGift.bandName,
          status: this.queryFormGoods.status,
          cid: "",
          endTime: "",
          goodsClassify: this.queryFormGoods.clientType[
            this.queryFormGoods.clientType.length - 1
          ], //this.queryFormGift.clientType,
          goodsName: "",
          orderType: "",
          storageLocationName: this.queryFormGift.kw,
          pageNo: this.pageGift,
          pageSize: this.pageSizeGift,
          startTime: "",
          title: "",
          type: 1,
          vender: "",
          warId: this.queryFormGift.wareName,
          damagedWarId: this.queryFormGift.damagedWarId
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
          }
        });
    },
    // 搜索
    searchEvent () {
      if (this.activeName == "0") {
        this.currentPage1 = 1;
        this.pageSize = 10;
        this.goodsList();
      } else if (this.activeName == "1") {
        this.pageGift = 1;
        this.pageSizeGift = 10;
        this.giftList();
      }
    },
    // 重置
    reset () {
      if (this.activeName == "0") {
        this.currentPage1 = 1;
        this.pageSize = 10;
        this.queryFormGoods = {
          clientType: [],
          wareName: "",
          bandName: "",
          info: "",
        };
        this.goodsList();
      } else if (this.activeName == "1") {
        this.pageGift = 1;
        this.pageSizeGift = 10;
        this.queryFormGift = {
          clientType: [],
          wareName: "",
          bandName: "",
          info: "",
        };
        this.giftList();
      }
    },
    wareList () {
      this.axios
        .post("/order/comm/commWarehouse/list", {
          pageSize: 999,
          pageNo: 1
        }, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.wareData = res.data.list;
            this.wareData1 = res.data.list.filter(i => i.damagedName != null);
          } else {
            this.$message.error(res.message);
          }
        });
    },
    brandSelect1 () {
      // 分类列表
      this.axios
        .get("/order/comm/commodity/selectBrand", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            for (let i in res.data) {
              if (res.data[i].name.indexOf("赠品") == -1) {
                this.options.push(res.data[i]);
              }
            }
          } else {
            this.$message.error(res.message);
          }
        });
      // 品牌列表
      this.axios
        .get("/order/comm/commodity/selectList", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.brandselect = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    handleClick (val) {
      this.activeName = val.name;
      this.tableData = [];
      if (val.name == "0") {
        this.goodsList();
      } else if (val.name == "1") {
        this.giftList();
      }
    },
    // 分页
    handleCurrentChange (val) {
      if (this.activeName == "0") {
        this.currentPage1 = val;
        this.goodsList();
      } else if (this.activeName == "1") {
        this.pageGift = val;
        this.giftList();
      }
    },
    handleSizeChange (val) {
      if (this.activeName == "0") {
        this.pageSize = val;
        this.goodsList();
      } else if (this.activeName == "1") {
        this.pageSizeGift = val;
        this.giftList();
      }
    },
  },
  components: {
    Treeselect,
  },
};
</script>

<style scoped lang="scss">
/deep/.el-drawer__body {
  overflow-y: auto;
}
.btns {
  display: flex;
  justify-content: space-between;
}
/deep/.el-drawer:focus {
  outline: none;
}

.tableContext1 {
  height: 83%;
  overflow-y: scroll;
}
.div1 {
  background: url(../../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  background: url(../../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.div3 {
  margin-left: -8px;
  background: url(../../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.nav {
  margin-top: 10px;
  /deep/.el-tabs__item {
    width: 70px;
    text-align: center;
    padding: 0;
  }
}
/deep/.el-form {
  /deep/.el-input__inner {
    width: 200px;
  }
  /deep/ .el-form-item label:after {
    display: inline-block;
    width: 100%;
  }
  /deep/ .el-form-item__label {
    text-align: justify;
    height: 50px;
  }
}
.query {
  background: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 0px 0px 10px 10px;
}

.buttonCont {
  margin: 10px 0;
}
.header {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 15px;
    color: #333;
  }

  p {
    color: #333;
    font-size: 12px;
  }
}

/deep/.el-tabs__header {
  margin: 0;
  background: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/deep/.el-tabs__content {
  overflow: unset;
}

/deep/.el-table thead {
  color: #333;
  text-align: center;
}

.operation {
  font-size: 14px;
  color: #006af1;
  display: inline-block;
  padding: 0 5px;
}

.operation:hover {
  cursor: pointer;
}

.page {
  padding-right: 20px;
  text-align: right;
  width: 98%;
  position: fixed;
  bottom: 0;
  right: 0;
  background: #f5f5f5;
  z-index: 100;

  span {
    font-size: 15px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input--suffix .el-input__inner {
    background: #fff;
    color: #000;
    width: 104px;
    box-shadow: none;
  }
}

.action {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0px 0px 10px 10px;
  background: #fff;
  z-index: 100;
}
.demo-table-expand {
  text-align: left;
}
.el-table td,
.el-table th {
  text-align: center;
}
.selectTree {
  width: 200px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
/deep/.vue-treeselect {
  height: 28px;
}
/deep/.vue-treeselect--searchable .vue-treeselect__input-container {
  height: 28px;
  line-height: 28px;
  width: 100%;
}
/deep/.vue-treeselect__single-value {
  font-size: 14px;
  line-height: 28px;
}
/deep/.vue-treeselect__menu-container {
  font-size: 15px;
}
/deep/.vue-treeselect__multi-value-item {
  height: 20px;
  line-height: 20px;
  padding: 0;
}
/deep/.vue-treeselect__input {
  height: 26px;
  line-height: 26px;
  outline: none;
  border: none;
  padding: 0;
}
/deep/.vue-treeselect__placeholder {
  font-size: 10px;
  line-height: 28px;
}
/deep/.vue-treeselect--has-value .vue-treeselect__multi-value {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.vue-treeselect__control {
  height: 28px;
}
</style>
